<script setup lang="ts">
    import { ref, onMounted, onUnmounted } from 'vue'
    import { useRoute } from "vue-router";
    import { FuelBunkerTRecord, BunkerWithThreeDimension } from "@/api/Bunker";
    import * as echarts from 'echarts';
    import Three, { type InBunker } from "@/components/three/three.vue";
    interface InState {
        /** 数据状态 */
        loading: boolean;
        /** 煤堆数据 */
        dataList: FuelBunkerTRecord[];
        /** 当前操作煤堆 */
        currentData: BunkerWithThreeDimension;
    }
    const threeRef = ref<InstanceType<typeof Three> | null>(null);
    const coalIndex = ref(0)
    const route = useRoute();
    /** 数据 */
    let state = ref<InState>({
        loading: false,
        dataList: [],
        currentData: new BunkerWithThreeDimension({}),
    })
    /** 切换煤堆 */
    function clickCoal(index: number, data: FuelBunkerTRecord, executeId?: number) {
        if (pieChart.value) {
            pieChart.value.dispose();
        }
        coalIndex.value = index;
        threeRef.value?.handleSelectChange(data.bunkerId, executeId);
        state.value.loading = true;
    }

    const pieChart = ref<echarts.ECharts | null>(null);

    function initChart() {
        const body: { [key: string]: number } = {
            "运行": 0,
            "报警": 0,
            "停机": 0,
        };
        state.value.currentData.devicesStatus?.forEach(item => {
            if (body[item.statusDes ?? ""]) {
                body[item.statusDes ?? ""]++;
            } else {
                body[item.statusDes ?? ""] = 1;
            }
        });
        // 图表
        pieChart.value = echarts.init(document.getElementById('pieChart'));
        pieChart.value.setOption({
            color: ['#2A6FD9', '#E04940', '#FAB823'],
            title: {
                text: '运行情况',
                left: '10px',
                top: '10px',
                textStyle: {
                    fontSize: 15
                }
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                right: '18%',
                top: 'center',
                icon: 'circle',
                itemGap: 24,
                itemWidth: 10
            },
            series: [
                {
                    type: 'pie',
                    radius: '70%',
                    center: ['40%', '50%'],
                    label: {
                        show: false
                    },
                    data: Object.keys(body).map(name => ({ name, value: body[name] })),
                    // data: [
                    //     { value: 600, name: '正常' },
                    //     { value: 135, name: '报警' },
                    //     { value: 58, name: '停机' }
                    // ],
                }
            ]
        })

    }

    /** 三维回传数据 */
    function getBunker(data?: FuelBunkerTRecord[]) {
        state.value.loading = false;
        state.value.dataList = data ?? [];
        const bunkerId = route.query.bunkerId as string | undefined;
        const executeId = route.query.executeId as string | undefined;
        if (bunkerId) {
            const index = state.value.dataList.findIndex(item => item.bunkerId?.toString() == bunkerId);
            if (executeId) {
                clickCoal(index, state.value.dataList[index], Number(executeId));
            }
            else {
                clickCoal(index, state.value.dataList[index]);
            }
        } else {
            clickCoal(0, state.value.dataList[0]);
        }

    }

    /** 三维回传煤堆详情数据 */
    function getBunkerInfo(data?: BunkerWithThreeDimension) {
        state.value.loading = false;
        state.value.currentData = new BunkerWithThreeDimension(data ?? {});
        initChart();
    }

    onMounted(() => {
        state.value.loading = true;
    });
    onUnmounted(() => {
        if (pieChart.value) {
            pieChart.value.dispose();
        }
    })
</script>
<template>
    <div class="yard_3d_title" v-loading="state.loading">
        <h3>三维煤场动态监测系统</h3>
        <ul>
            <li :class="coalIndex == index ? 'hover' : ''" v-for="(item, index) in state.dataList" :key="item.bunkerId" @click="clickCoal(index, item)">
                {{ item.bunkerName }}
            </li>
        </ul>
        <div></div>
    </div>
    <div class="dimension_flex" v-loading="state.loading">
        <div class="dimension">
            <Three ref="threeRef" @bunker="getBunker" @bunkerinfo="getBunkerInfo"></Three>
        </div>
        <div class="dimension_info">
            <h3>煤场信息</h3>
            <div class="table_info small2">
                <table>
                    <colgroup>
                        <col width="50%">
                        <col width="50%">
                    </colgroup>
                    <tr>
                        <th>总存煤量(吨）</th>
                        <td>{{ state.currentData.info?.zcml ?? "--" }}</td>
                    </tr>
                    <tr>
                        <th>剩余库存空间(吨)</th>
                        <td>{{ state.currentData.info?.sykckj ?? "--" }}</td>
                    </tr>
                    <tr>
                        <th>存煤可用(天)</th>
                        <td>{{ state.currentData.info?.cmky ?? "--" }}</td>
                    </tr>
                    <tr>
                        <th>今日进煤量(吨）</th>
                        <td>{{ state.currentData.info?.jrjml ?? "--" }}</td>
                    </tr>
                    <tr>
                        <th>今日耗煤量(吨）</th>
                        <td>{{ state.currentData.info?.jrhml ?? "--" }}</td>
                    </tr>
                    <tr>
                        <th>总热值(MJ/kg)</th>
                        <td>{{ state.currentData.info?.zrz ?? "--" }}</td>
                    </tr>
                </table>
            </div>
            <h3 class="mt15">堆取料机姿态</h3>
            <div class="reclaimer">
                <img class="ph" src="../../assets/img/doulunji.png" alt="">
                <ul class="info">
                    <li>
                        <span>堆料臂回转角:</span>
                        <span>
                            {{ state.currentData.stackerAndReclaimerState?.stackerTurningAngle ?? "--" }}
                        </span>
                        <span>°</span>
                    </li>
                    <li>
                        <span>取料臂回转角:</span>
                        <span>
                            {{ state.currentData.stackerAndReclaimerState?.reclaimerTurningAngle ?? "--" }}
                        </span>
                        <span>°</span>
                    </li>
                    <li>
                        <span>堆料臂俯仰角:</span>
                        <span>
                            {{ state.currentData.stackerAndReclaimerState?.stackerPitchAngle ?? "--" }}
                        </span>
                        <span>°</span>
                    </li>
                    <li>
                        <span>取料臂俯仰角:</span>
                        <span>
                            {{ state.currentData.stackerAndReclaimerState?.reclaimerPitchAngle ?? "--" }}
                        </span>
                        <span>°</span>
                    </li>
                </ul>
            </div>
            <h3 class="mt15">设备状态</h3>
            <div class="chart_main" id="pieChart"></div>
            <div class="table_info small2">
                <table>
                    <tr>
                        <th>设备名称</th>
                        <th>设备编号</th>
                        <th>运行时长</th>
                        <th>运行状态</th>
                    </tr>
                    <tr v-for="dItem in state.currentData.devicesStatus">
                        <td>{{ dItem.deviceName }}</td>
                        <td>{{ dItem.deviceCode }}</td>
                        <td>{{ dItem.runTimeNum }}</td>
                        <td>
                            <div class="running_status green">
                                <i></i>
                                <span>{{ dItem.statusDes }}</span>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
    .chart_main {
        width: 100%;
        height: 160px;
        background: #fff;
        border: 1px solid #E0E5ED;
    }

    .reclaimer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid #E0E5ED;
        padding: 20px;
        background: #fff;

        .ph {
            width: 220px;
            height: 150px;
        }

        ul {
            background: #FFFFFF;
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #E0E5ED;
            width: 220px;
            padding: 10px 0;

            li {
                font-weight: 500;
                font-size: 15px;
                color: #3D4755;
                line-height: 24px;
                padding: 8px 0 8px 30px;
            }
        }
    }

    .running_status {
        display: flex;
        align-items: center;
        justify-content: center;

        i {
            flex-shrink: 0;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 5px;
        }

        &.green {
            i {
                background: #07E03A;
            }
        }

        &.red {
            i {
                background: #E04940;
            }
        }
    }
</style>